Prizm Content Connect
HTML5 Parameters
Developer Guide (API Reference) > HTML5 Viewers > HTML5 Parameters

The HTML5 Viewer supports a list of parameters that are used to customize the user interface and specify the documents and annotations that should be loaded.

The following example shows how to configure the parameters:

JavaScript Example
Copy Code 
<script type="text/javascript">
    $(document).ready(function() {
        var pluginOptions = {
            documentID: "sample.pdf",
            toolboxMenuOpen: false,
            uiElements: {
                defaultMouseTool: "selectText",
                textColor: "#222222"
            },
            language: {
                rotateLeft: "Turn Left",
                searchLabel: "Find"
            }
        };
        $("#sample").pccViewer(pluginOptions);
    });
</script>

This topic contains the following sections:

Configuration

Parameter

Data Type

Description

documentID

String

Specifies the document to be loaded within the viewer.

imageHandlerUrl

String

Specifies the location of the image handler.

annotationID

String

Specifies the annotation file to be used within the viewer.
autoLoadAnnotation Boolean If set to True, the specified annotation file will be loaded when the viewer launches.

resourcePath

String

The location of the toolbox icons within of the viewer. By default, this is set to the "Images" folder. Please note, the viewer also references background images used within the style sheet (pcc.css) that will also need to be updated in the event that the "Images" folder is renamed or moved.

toolboxMenuOpen

Boolean

Whether the toolbox menu should be opened or closed when the viewer is initialized.
fitType String How the document should be rendered within the viewer. The options are: "FullImage", "ActualSize", "FullHeight", and "FullWidth".  If no option is specified, the default fitType will be "FullImage".
rotationDegreesClockwise String Specifies the rotation (in degrees clockwise) to be used when a page is loaded in the viewer. Valid options are: 0, 90, 180, 270, -90, -180, and -270. If an invalid value is specified, the default value of 0 is used.
zoomFactor String Specifies the zoom factor to be used when a page is loaded in the viewer. This parameter takes precedence over the fitType parameter. If no option, 0, or an invalid value is specified, then fitType is used. Valid values are between 0 and 20.
maintainZoomLevel Boolean Specifies whether or not to maintain the zoom level while navigating between pages. Note: Currently, this parameter only effects the zoom level when set using the toolbar zoom buttons. The zoom level is not maintained when modified via the Context menu.
encryption Boolean

Specifies whether content encryption is turned on or off.

Example
Copy Code 
$(document).ready(function () {
var pluginOptions1 = {
documentID: viewingSessionId,
toolboxMenuOpen: false,
encryption: true

For more information on encryption, refer to How to Enable Content Encryption for the HTML5 Viewer.

uiElements

Parameter

Data Type

Description
defaultMouseTool String The default tool selected within the viewer. The options are: selectToZoom, panTool, magnifierTool and selectText. If no option is specified, the selectText tool will be the default.

tooltips

Boolean

Enable or disable tooltips within the viewer.

navigation

Boolean

Hide or show the navigation bar.
contextMenu Boolean Hide or show the contextMenu.

firstLastPage

Boolean

Hide or show the First and Last page navigation buttons.

nextPreviousPage

Boolean

Hide or show the Next and Previous page navigation buttons.

toolboxMenu

Boolean

Hide or show the toolbox menu.

zoomIn

Boolean

Hide or show the zoom-in button.

zoomOut

Boolean

Hide or show the zoom-out button.
printing Boolean Hide or show the printing button.

fullScreenToggle

Boolean

Hide or show the Full Screen toggle button.
fullScreenOnInit Boolean Launch the viewer in Full Screen mode.

viewTab

Boolean

Hide or show the View Tab

magnifierTool

Boolean

Hide or show the magnifier tool, located within the View Tab.

selectToZoom

Boolean

Hide or show the select to zoom tool, located within the View Tab.

panTool

Boolean

Hide or show the pan tool, located within the View Tab.

rotateRight

Boolean

Hide or show the rotate right button, located within the View Tab.

rotateLeft

Boolean

Hide or show the rotate left button, located within the View Tab.

viewFullImage

Boolean

Hide or show the view full image button, located within the View Tab.

fitToWidth

Boolean

Hide or show the fit to width button, located within the View Tab.

fitToHeight

Boolean

Hide or show the fit to height button, located within the View Tab.

viewActualSize

Boolean

Hide or show the view actual size button, located within the View Tab.
searchTab Boolean Hide or show the Search Tab.

thumbnailTab

Boolean

Hide or show the Thumbnail Tab.

annotateRedactTab

Boolean

Hide or show the Annotate & Redact Tab. This requires a product license that supports annotation and/or redaction features.

annotateTab

Boolean

Hide or show the Annotate Tab. If the annotateRedactTab is marked to false, this value will be overridden. This requires a product license that supports annotation features.

redactTab

Boolean

Hide or show the Redact Tab. This requires a product license that supports redaction features.

saveLoadAnnotations

Boolean

Hide or show the save and load functionality for annotations and redactions.

arrowAnnotation

Boolean

Hide or show the arrow annotation button, located within the Annotate Tab.

lineAnnotation

Boolean

Hide or show the line annotation button, located within the Annotate Tab.

rectangleAnnotation

Boolean

Hide or show the rectangle annotation button, located within the Annotate Tab.
transparentAnnotation Boolean Hide or show the transparent annotation button, located within the Annotate Tab.

ellipseAnnotation

Boolean

Hide or show the ellipse annotation button, located within the Annotate Tab.

editMarks

Boolean

Hide or show the edit marks button, located within the Annotate and Redact Tabs.

deleteMarks

Boolean

Hide or show the delete marks button, located within the Annotate and Redact Tabs.

textAnnotation

Boolean

Hide or show the text annotation button, located within the Annotate and Redact Tabs.
stampAnnotation Boolean Hide or show the stamp annotation button, located within the Annotate Tab.
stampAnnotationLabels Array Array of selectable options. By default, the values are: ["APPROVED","REVIEWED","REJECTED"]
stampColor String Specifies the Hexadecimal color code for the stamp annotation. By default, the color is: #000000.
stampRedactionLabels Array Array of selectable options. By default, the values are: ["APPROVED","REVIEWED","REJECTED"]

rectangleRedaction

Boolean

Hide or show the rectangle redaction button, located within the Redact Tab.

transparentRedaction

Boolean

Hide or show the transparent redaction button, located within the Redact Tab.

textRedaction

Boolean

Hide or show the text redaction button, located within the Redact Tab.
stampRedaction Boolean Hide or show the stamp redaction button, located within the Redact Tab.
arrowColor String Specifies the Hexadecimal color code for the arrow annotation. By default, the color is: #FB0404.
lineColor String Specifies the Hexadecimal color for the line annotation. By default, the color is: #18385F.
rectangleColor String Specifies the Hexadecimal color for the rectangle annotation. By default, the color is: #FB0404.
transparentColor String Specifies the Hexadecimal color for the transparent annotation. By default, the color is: #FFFF00.
ellipseColor String Specifies the Hexadecimal color for the ellipse annotation. By default, the color is: #FB0404.
textColor String Specifies the Hexadecimal color for the text annotation. By default, the color is: #000000.

Language

The language parameters allow you to redefine the text strings used in the HTML5 Viewer. This allows you to localize the UI elements to meet different language requirements.

The following example shows how to configure the language parameters: 

JavaScript Example
Copy Code 
<script type="text/javascript">
    $(document).ready(function () {

        var languageItems: {
                about: “sobre PCC”,
                contextMenu: {
                    thicknessMenu: {item1: "1", item2: "2", ...
                }
            };

        var pluginOptions = {
                language: languageItems,
                uiElements: {
                    advancedSearch: false
                }
            };

        $("#sample").pccViewer(pluginOptions);
      });
</script>

Parameter

Data Type

Description

about

String

Tooltip for the "About PCC" button.

magnifierTool

String

Tooltip for the "Magnifier Tool" button.

selectToZoom

String

Tooltip for the "Zoom to Selected" button.

panTool

String

Tooltip for the "Pan Tool" button.

rotateRight

String

Tooltip for the "Rotate Right" button.

rotateLeft

String

Tooltip for the "Rotate Left" button.

viewFullImage

String

Tooltip for the "Show Full Image" button.

fitToWidth

String

Tooltip for the "Fit to Width" button.

fitToHeight

String

Tooltip for the "Fit to Height" button.

viewActualSize

String

Tooltip for the "Display Actual Size" button.

arrowAnnotation

String

Tooltip for the "Draw Arrow" button.

lineAnnotation

String

Tooltip for the "Draw Line" button.

rectangleAnnotation

String

Tooltip for the "Rectangle" button.

transparentAnnotation

String

Tooltip for the "Transparent Rectangle" button.

ellipseAnnotation

String

Tooltip for the "Create Ellipse" button.

editMarks

String

Tooltip for the "Edit Annotation" button.

deleteMarks

String

Tooltip for the "Delete Selected" button.

selectText

String

Tooltip for the "Select Text" button.

textAnnotation

String

Tooltip for the "Text Annotation" button.

rectangleRedaction

String

Tooltip for the "Filled Rectangle" Redaction button.

transparentRedaction

String

Tooltip for the "Transparent Rectangle" Redaction button.

textRedaction

String

Tooltip for the "Text Redaction" button.

stampAnnotation

String

Tooltip for the "Stamp Annotation" button.

stampRedaction

String

Tooltip for the "Stamp Redaction" button.

saveAnnotations

String

Tooltip for the "Save Annotations" button.

loadAnnotations

String

Tooltip for the "Load Annotations" button.

saveRedactions

String

Tooltip for the "Save Redactions" button.

editRedactions

String

Tooltip for the "Edit Redaction" button.

deleteRedaction

String

Tooltip for the "Delete Selected" Redaction button.

boldText

String

Tooltip for the "Bold Text" button.

italicText

String

Tooltip for the "Italic Text" button.

alignLeft

String

Tooltip for the "Align Left" button.

alignCenter

String

Tooltip for the "Align Center" button.

alignRight

String

Tooltip for the "Align Right" button.

textColor

String

Label for the "Text Color" function.

annotationColor

String

Label for the "Annotation Color" function.

stampColor

String

Label for the "Annotation Color" function.

update

String

Label for the "Update" button on the Color Picker Menu.

noTextSupport

String

The "This page does not support text highlighting" notification that displays when text highlighting is not supported.

annotationsSaved

String

The "Annotations Saved" notification that displays when you save annotations.

annotationSaveError

String

The "Error Saving" notification that displays when there is an error saving annotations.

annotationsLoaded

String

The "Annotations Loaded" notification that displays when annotations are loaded.

annotationLoadError

String

The "Error Loading Annotations" notification that displays when there is an error loading annotations.

search

String

Tooltip for the "Search" button.

cannotSearch

String

The "page(s) cannot be searched." text that displays as part of the summary of pages that cannot be searched.

cancelSearch

String

Tooltip for the "Cancel Search" button.

noSearchableText

String

The "This document does not contain searchable text." notification that displays

 when the document does not contain searchable text.

minimumSearch1

String

The "Please enter a keyword" part of the notification that displays when the minimum search length has not been met.

minimumSearch2

String

The "greater than" part of the notification that displays when the minimum search length has not been met.

minimumSearch3

String

The "2 characters" part of the notification that displays when the minimum search length has not been met.

searching

String

The "Searching ..." notification that displays while searching.

errorLoadingDocumentTitle

String

The "Error Loading Document" error title that displays when there is an error loading the document.

errorLoadingDocument

String

The "The viewer failed to load the document" error message that displays when there is an error loading the document.

Toolbox Labels

searchLabel

String

The "Search" label on the Search toolbox.

viewLabel

String

The "View" label on the View toolbox.

thumbnailsLabel

String

The "Thumbnails" label on the Thumbnails toolbox.

annotateRedactLabel

String

The "Annotate & Redact" label on the Annotate & Redact toolbox.

annotateLabel

String

The "Annotate" label for the Annotate tab.

redactLabel

String

The "Redact Label" for the Redact tab.

Printing Labels

title

String

The "Print pages" title on the print menu.

all

String

The "All" label for the All option on the print menu.

range

String

The "Range (1-5, 8, 10-15)" placeholder text for the Range input on the print menu.

current

String

The "Current" label for the Current option on the print menu.

includeAnnotations

String

The "Include Annotations" label for the Include Annotations option on the print menu.

printButton

String

The "Print" button label.

cancelButton

String

The "Cancel" button label.

requestingDocument

String

The "Requesting Document..." notification.

preparingDocument

String

The "Preparing your document for printing..." notification.

printingRangeError

String

The "You have entered an invalid page range" notification.

preparingPage

String

The "Preparing Page" notification.

of

String

The word "of" used in document paging messages.

Search Labels

page

String

The "Page" label that displays in the search results.

displayingResults

String

The "Displaying Results" label that displays in the search results.
yourSearchReturned String The "Your Search Returned" message that displays when there are no search results.

reset

String

The "Reset" button label.

clear

String

The word "Clear" used in Clear All labels.

results

String

The word "Results" used in Clear Results label and Results tab.
clearResults String The term "Clear Results" used on Clear Results label.
clearAll String The term "Clear All" used on the Clear All label.
selectAll String The term "Select All" used on the Select All label.

matchExact

String

Tooltip for the "Match Exact word or phrase" toggle button.

matchCase

String

Tooltip for the "Match Case" button.

wholeWord

String

Tooltip for the "Whole Word" button.

useWildcards

String

Tooltip for the "Use Wildcards" button.

beginsWith

String

Tooltip for the "Begins With" button.

endsWith

String

Tooltip for the "Ends With" button.

previousSearches

String

Label for "Previous Searches" menu item.

searchPresets

String

Label for "Search Patterns" menu item.

Context Menu

contextMenu

Object

Parent object for Context Menu parameters. 

Example
Copy Code 
language: {
    about: "About PCC"
    contextMenu: {
        zoomInMenuItem: "Zoom in 25%"
        selectColor: "Choose a Color",
    }
}

Viewer Actions

zoomInMenuItem

String

Label for "Zoom In 25%" menu item.

zoomOutMenuItem

String

Label for "Zoom Out 25%" menu item.

fullImageMenuItem

String

Label for "Full Image" menu item.

fullWidthMenuItem

String

Label for "Full Width" menu item.

fullHeightMenuItem

String

Label for "Full Height" menu item.

oneToOneRatioMenuItem

String

Label for "1 to 1 Ratio" menu item.

actualSizeMenuItem

String

Label for "Actual Size" menu item.

rotateRightMenuItem

String

Label for "Rotate Clockwise" menu item.

rotateLeftMenuItem

String

Label for "Rotate Counter-Clockwise" menu item.

mirrorHorizontalMenuItem

String

Label for "Mirror Horizontal" menu item.

mirrorVerticalMenuItem

String

Label for "Mirror Vertical" menu item.

Mouse Tools

panToolMenuItem

String

Label for "Pan Tool" menu item.

areaSelectionToolMenuItem

String

Label for "Area Selection Tool" menu item.

zoomRectangleToolMenuItem

String

Label for "Zoom Rectangle Tool" menu item.

flyingMagnifierToolMenuItem

String

Label for "Flying Magnifier Tool" menu item.

createTextMarkToolMenuItem

String

Label for "Create Text Mark" menu item.

createLineMarkToolMenuItem

String

Label for "Create Line Mark" menu item.

createPolygonMarkToolMenuItem

String

Label for "Create Polygon Mark" menu item.

createPolylineMarkToolMenuItem

String

Label for "Create Polyline Mark" menu item.

createRectangleMarkToolMenuItem

String

Label for "Create Rectangle Mark" menu item.

createEllipseMarkToolMenuItem

String

Label for "Create Ellipse Mark" menu item.

createFreehandMarkToolMenuItem

String

Label for "Create Freehand Mark" menu item.

editMarksToolMenuItem

String

Label for "Edit Marks" menu item.

runMarksToolMenuItem

String

Label for "Run Marks" menu item.
createHighlightMarkToolMenuItem String Label for "Create Highlight Mark" menu item.

Stamp Annotation

createStampMarkToolMenuItem

String

Label for "Create Stamp Mark" menu item.

Mark Attributes

thicknessMenu

Object

Parent object for Context Menu Mark Thickness labels.  

Example
Copy Code 
language: {
    contextMenu: { 
        thicknessMenu: {item1: "1", item2: "2", item3: "3", item4:"4", item5:"5", item6:"6", item7:"7", item8:"8"}
    }
}

opacityMenu

Object

Parent object for Context Menu Opacity labels.  

Example
Copy Code 
language: {
    contextMenu: {
        translucent: "Translucent (127)", 
        opaque: "Opaque (255)"
    }
}

calloutTypeMenu

Object

Parent object for Context Menu Callout Type labels.  

Example
Copy Code 
language: {
    contextMenu: { 
        calloutTypeMenu: {
            line: "Line",
            triangle: "Triangle"
        }
    }
}

borderThicknessMenuItem

String

Label for "Border Thickness" menu item.

borderColorMenuItem

String

Label for "Border Color..." menu item.

fillColorMenuItem

String

Label for "Fill Color..." menu item.

lineThicknessMenuItem

String

Label for "Thickness" menu item.

lineColorMenuItem

String

Label for "Color..." menu item.

fontMenuItem

String

Label for "Font..." menu item.

opacityMenuItem

String

Label for "Opacity" menu item.

calloutTypeMenuItem

String

Label for "Callout Type" menu item.

calloutVisibleMenuItem

String

Label for "Callout Visible" menu item.

Mark Actions

moveToBackMenuItem

String

Label for "Move to Back" menu item.

moveBackwardMenuItem

String

Label for "Move Backward" menu item.

moveForwardMenuItem

String

Label for "Move Forward" menu item.

moveToFrontMenuItem

String

Label for "Move to Front" menu item.

deleteMarkMenuItem

String

Label for "Delete Mark" menu item.

Menus

zoomToFitMenuItem

String

Label for "Zoom to Fit" menu item.

orientationMenuItem

String

Label for "Orientation" menu item.

mouseToolsMenuItem

String

Label for "Mouse Tools" menu item.

rectangleMarkPropertiesMenuItem

String

Label for "Properties" menu item.

textMarkPropertiesMenuItem

String

Label for "Properties" menu item.

polygonMarkPropertiesMenuItem

String

Label for "Properties" menu item.

polylineMarkPropertiesMenuItem

String

Label for "Properties" menu item.

lineMarkPropertiesMenuItem

String

Label for "Properties" menu item.

markOrderingMenuItem

String

Label for "Ordering" menu item.
stampMarkPropertiesMenuItem String Label for "Properties" menu item.

Dialog Boxes

selectColor

 String

Title for the "Select Color" dialog box.

selectFont

String

Title for the "Select Font" dialog box.
ok String

Label for the "OK" button in all dialog boxes.
cancel String

Label for the "CANCEL" button in all dialog boxes.
red String

Label for the "Red" field in the Select Color dialog box.
green String

Label for the "Green" field in the Select Color dialog box.
blue String

Label for the "Blue" field in the Select Color dialog box.
font String

Label for the "Font" field in the Select Font dialog box.
size String

Label for the "Size" field in the Select Font dialog box.
italic String

Label for the "Italic" checkbox in the Select Font dialog box.
bold String

Label for the "Bold" checkbox in the Select Font dialog box.
underline String

Label for the "Underline" checkbox in the Select Font dialog box.
strikeout String

Label for the "Strikeout" checkbox in the Select Font dialog box.

Advanced Search

Predefined Search Patterns

Advanced search allows you to define a set of predefined search terms. To enable this functionality you must add the predefinedSearch property to the viewer parameters. The following example shows you how:

JavaScript Example
Copy Code 
<script type="text/javascript">
$(document).ready(function () {
    var pluginOptions = {
        uiElements: {
            predefinedSearch: {
                highlightColor: "#ee3a8c",
                searchOnInit: false,
                globalOptions: {
                    matchCase: false,
                    endsWith: false,
                    beginsWith: false,
                    matchWholeWord: false
                },
                terms: [{
                    searchTerm: "llama",
                    selected: true,
                    options: {
                        matchWholeWord: true
                    }
                },
                {
                    searchTerm: "Words that begin with ll",
                    userDefinedRegex: "\\bll(\\w*)\\b",
                    selected: true,
                    highlightColor: "#4169e1",
                    options: {
                        matchCase: true
                    }
                }]
            }
        }
    };
    $("#sample").pccViewer(pluginOptions);
});
</script>

predefinedSearch

Parameter

Data Type

Description

highlightColor

String

The default highlight color of the search terms. This is overridden by the term-level parameter. This must be in 6 digit hexadecimal format preceded by a #.

Example: "#ee3a8c"

searchOnInit

Boolean

Run search on launch.

globalOptions

Object

Set the default search options for each of the predefined search terms. This is overridden by the term-level "options" parameter.

Example
Copy Code 
predefinedSearch : {
    globalOptions: {
        matchCase: false,
        endsWith: false,
        beginsWith: false,
        matchWholeWord: false
    }
}

terms

Array

An array of objects that represent the search terms that will be available in the predefined menu.

Example
Copy Code 
predefinedSearch : {
    terms: [
        {
            searchTerm: "llama"
        }
    ]
}

terms

Parameter

Data Type

Description

searchTerm

String

The search string for the term object. This is overridden by the userDefinedRegex parameter.

userDefinedRegex

String

A regular expression that will be searched in place of searchTerm. The first and last forward slashes, as well as the flags, are stripped from the string. For example, "/Pa(\\w+)/ig" will become "Pa(\\w+)". 

When special characters (ex: backslash) are used in the "userDefinedRegex" field, they need to be properly escaped. For example, for searching words that begins with "Pa", the regular expression will be "Pa(\w+)", this regular expression should be properly escaped like this "Pa(\\w+)".

All patterns use the Global(g) flag.

Example
Copy Code 
predefinedSearch : {
    terms: [
        {
            searchTerm: "4 digits"
            userdefinedRegex: "(\\d{4})"
        }
    ]
}

selected

Boolean

Whether or not this term will be selected in the menu.

options

Object

Set the search options for this term. If a parameter is not defined it will inherit the globalOptions-level parameter.

Example
Copy Code 
predefinedSearch : {
    terms: [
        {
            searchTerm: "Lla"
            options: {
                matchCase: true,
                endsWith: false,
                beginsWith: true,
                matchWholeWord: false
        }
    }
}

Disabling Advanced Search

To disable the Advanced Search functionality, you must set the advancedSearch property to False:

JavaScript Example
Copy Code 
<script type="text/javascript">
    $(document).ready(function() {
        var pluginOptions = {
            uiElements: {
                advancedSearch: false
            }
        };
        $("#sample").pccViewer(pluginOptions);
    });
</script>

 

See Also
How To's - for the HTML5 Viewer

 

 

©2014. Accusoft Corporation. All Rights Reserved.

Send Feedback